<template>
  <div>
    <h1>test</h1>
    <div>n : {{ n }} <button @click="add1">add1</button></div>
    <div>num : {{ num }} <button @click="add2">add2</button></div>
    <div>合计：{{ total }}</div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
let num = ref(100);
let n = 1;
let add1 = () => {
  n++;
  console.log(n);
};
let add2 = () => {
  num.value++;
  console.log(num);
};
let total = computed(() => {
  return num.value * n;
});
onMounted(() => {
  console.log("组件挂载");
});
onUnmounted(() => {
  console.log("组件卸载");
});
</script>
